<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
       {{ msg }}
<!--使得一个变量成为一个标签-->
        <p v-html="rawHtml"></p>
<!--        v-bind:属性=“变量名”-->
        <p v-bind:class="color2">v-bind</p>

<!--    使用js表达式-->
        <p>{{number + 1}}</p>
        <p>{{ok==2 ? 'yes': 'no'}}</p>
<!--        判断？ ‘是执行’：‘不是执行’-->
        <p>{{message.split('').reverse().join('')}}</p>
<!--        v-if -->
    </div>


<!--js代码逻辑-->

    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                message: 'hi vue',
                msg: 'hi vue',
                rawHtml : '<span style="color:red">this is should be red</span>',
                color2: 'zion',
                number: 12,
                ok: 1,
                showText:1,
            },
            methods: {
                fc:function () {
                    this.showText='我满足条件'
                },
                fc2:function () {
                    this.showText='我不满足条件'
                }
            }
        })
    </script>
<style type="text/css">
    .zion{
       color: blue;
        font-size: 112px;
    }
</style>
</body>
</html>